<template>
  <view class="series-list" :class="seriesTypeList[type - 1].class">
    <view class="tag">
      <view class="name"> {{ details.name }} </view>
      <view class="probability"> 概率: {{ details.probability }}</view>
    </view>
    <view class="scroll-group">
      <scroll-view
        class="scroll"
        :class="shadow ? 'shadow' : ''"
        scroll-x
        scroll-with-animation
        :scroll-left="scrollLeft"
        @scroll="onScroll"
        @scrolltolower="onreachBottom"
      >
        <view class="series-group">
          <view class="items" v-for="(item, index) in list" :key="index">
            <series-list-item
              :item="item"
              :type="type"
              @tap="lookDetails(item.goods_id)"
            ></series-list-item>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
// 图片
import supreme_img from '../img/supreme.png';
// import supreme_br from '../img/supreme-1.png';
import supreme_t from '../img/supreme-0.png';
import legend_img from '../img/legend.png';
// import legend_br from '../img/legend-1.png';
import king_img from '../img/king.png';
// import king_br from '../img/king-1.png';
import hot_img from '../img/hot.png';
// import hot_br from '../img/hot-1.png';
import normal_img from '../img/normal.png';
// import normal_br from '../img/normal-1.png';
import SeriesListItem from './series-list-item.vue';

///////
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: { SeriesListItem },
  props: {
    details: {
      type: Object,
      default: () => ({
        goods_list: [],
      }),
    },
    type: {
      type: [String, Number],
      default: '1',
    },
  },
  data() {
    return {
      // 图片
      supreme_t,
      ///////
      // 滚动条
      scrollLeft: 0,
      old_scrollLeft: 0,

      // 系列类型
      seriesTypeList: [
        {
          class: 'normal',
          tag: normal_img,
          // br: normal_br,
        },
        {
          class: 'hot',
          tag: hot_img,
          // br: hot_br,
        },
        {
          class: 'king',
          tag: king_img,
          // br: king_br,
        },
        {
          class: 'legend',
          tag: legend_img,
          // br: legend_br,
        },
        {
          class: 'supreme',
          tag: supreme_img,
          // br: supreme_br,
        },
      ],
      timerShadow: null,
      shadow: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    list() {
      return this.details?.goods_list || [];
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    // 监听滚动条
    onScroll(e) {
      this.old_scrollLeft = e.detail.scrollTop;
      if (this.shadow) return;
      this.shadow = true;
      if (this.timerShadow) {
        clearTimeout(this.timerShadow);
      }
      this.timerShadow = setTimeout(() => {
        this.shadow = false;
      }, 1500);
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
    lookDetails(ev) {
      this.$emit('look', { id: ev });
    },
  },
};
</script>
<style lang="scss" scoped>
view,
image {
  max-width: none;
}
.series-list {
  position: relative;
  margin-bottom: 10rpx;
  padding: 20rpx 0 0 0;
  width: 100%;
  min-height: 360rpx;
  --color: rgba(209, 209, 209, 1);

  &.supreme {
    --color: rgba(255, 224, 26, 1);
  }
  &.legend {
    --color: rgba(250, 66, 36, 1);
  }
  &.hot {
    --color: rgba(106, 192, 255, 1);
  }
  &.king {
    --color: rgba(212, 93, 255, 1);
  }

  .tag {
    display: flex;
    align-items: flex-end;
    position: relative;
    margin-left: 60rpx;
    padding-bottom: 6rpx;
    border-bottom: 2rpx solid var(--color);
    .name {
      font-size: 40rpx;
      max-width: 100rpx;
      min-width: 60rpx;

      color: var(--color);
      font-weight: 600;
    }
    .probability {
      margin-left: 14rpx;
      font-size: 26rpx;
      font-weight: 100;
      color: #fff;
      font-weight: 600;
    }
    &.normal {
      color: rgba(81, 95, 105, 1);
    }
  }

  .scroll-group {
    position: relative;
    padding: 4rpx 0 4rpx 0;
    width: 100%;
    height: 100%;
    border-radius: 20rpx 0 0 20rpx;
    overflow: hidden;

    .scroll.shadow {
      &::before {
        content: '';
        opacity: 0.9;
        position: absolute;
        top: 44rpx;
        left: 0rpx;
        z-index: 2;
        width: 40rpx;
        height: 268rpx;
        background-image: linear-gradient(90deg, #4604a2, transparent);
      }
      &::after {
        content: '';
        opacity: 0.9;
        position: absolute;
        top: 44rpx;
        right: 0rpx;
        z-index: 2;
        width: 40rpx;
        height: 270rpx;
        background-image: linear-gradient(-90deg, #4604a2, transparent);
      }
    }
    .scroll {
      position: relative;
      width: 100%;
      height: 100%;
      &::after,
      &::before {
        opacity: 0;
        transition: opacity 0.6s;
      }
      .series-group {
        display: inline-flex;
        align-items: center;
        padding-top: 25rpx;
        padding-left: 50rpx;
        width: 100%;
        height: 100%;
        .items {
          margin-right: 34rpx;
          flex-shrink: 0;
          width: 240rpx;
          height: 300rpx;
        }
      }
    }
  }
}
</style>
